﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Round.aspx.cs" Inherits="XF.Meeting.Api.meet.Round" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="stylesheets/reset.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">

    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
    <title>Title</title>
    <style>
        .container {
            
            position: absolute;
            width: 1280px;
            height: 800px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: url("./BG.png");
        }
        .container2 {
            display: none;
            position: absolute;
            width: 1280px;
            height: 800px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: url("./meetingBG2.png");
        }
        .container2>div{
            position: absolute;
            width: 1202px;
            height: 719px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: rgba(61,142,247,.6);
        }
        .container2>div .log{
            padding: 36px 60px;
        }
        .container2>div .title{
            font-size: 62px;
            padding: 40px 60px;
            color: #fff;
        }
        .container2>div .content{
            display: flex;
        }
        .container2>div .content .leftIcon{
            padding-left: 62px;
            padding-right: 36px;        }
        .container2>div .content .leftIcon img{
            vertical-align: middle;
        }
        .container2>div .content ul{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            padding: 6px 0;
            box-sizing: border-box;
        }
        .container2>div .content li{
            color: #fff;
            font-size: 62px;
            color: #fff;
            padding: 0;
            line-height: 62px;
        }

        .flexBox {
            display: flex;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 40px;
            padding-top: 90px;
            justify-content: space-between;
        }

            .flexBox .left {
                height: 669px;
                width: 873px;
                background: rgba(37,98,171,.6);
                padding: 30px 27px;
                box-sizing: border-box;
            }

            .flexBox .right {
                height: 669px;
                width: 285px;
                background: rgba(37,98,171,.6);
                text-align: center;
                color: #fff;
            }

            .flexBox .left .meetingName {
                font-size: 36px;
                font-weight: bold;
                color: #fff;
                margin: 0;
                /*margin-bottom: 28px;*/
            }

        .meetingInfo .titleText {
            font-size: 20px;
            /*font-weight: bold;*/
            color: #fc671a;
            border-bottom: 3px solid #fff;
            padding-bottom: 15px;
            position: relative;
        }

            .meetingInfo .titleText .markLine {
                position: absolute;
                bottom: -7px;
                left: 0;
                width: 104px;
                border-bottom: 11px solid #fc671a;
            }

        .meetingContent ul {
            list-style: none;
            padding: 0;
        }

            .meetingContent ul li {
                padding-bottom: 10px;
            }

                .meetingContent ul li:last-child {
                    padding-bottom: 0;
                }

        .meetingContent .property {
            color: #fc671a;
            font-size: 28px;
            /*font-weight: bold;*/
        }

            .meetingContent .property > em {
                font-style: normal;
                display: inline-block;
                width: 100px;
            }

        .meetingContent .ability {
            color: #fff;
            font-size: 28px;
            font-weight: bold;
            padding-left: 12px;
        }

        .todayMeeting {
            max-height: 230px;
            /*overflow-y: auto;*/
            overflow: hidden;
        }

            .todayMeeting table {
                width: 100%;
                border-spacing: 0;
                /*border-spacing: 20px 8px;*/
            }

                .todayMeeting table tr {
                    display: flex;
                }

                .todayMeeting table td {
                    font-size: 22px;
                    font-weight: bold;
                    margin-bottom: 8px;
                    text-align: center;
                }

                    .todayMeeting table td:first-child {
                        width: 409px;
                        margin-right: 20px;
                    }

                    .todayMeeting table td:nth-child(2) {
                        width: 190px;
                        margin-right: 20px;
                    }

                    .todayMeeting table td:nth-child(3) {
                        width: 176px;
                    }

            .todayMeeting thead td {
                color: #fc671a;
                /*line-height:42px ;*/
                line-height: 58px;
                margin-bottom: 0;
            }

            .todayMeeting tbody td {
                color: #fff;
                line-height: 50px;
                background-color: rgba(255,255,255,.5);
            }

            .todayMeeting tbody tr.now td {
                background-color: rgba(248,141,46,.6);
            }

        .right .date {
            font-size: 32px;
            line-height: 32px;
            margin-top: 70px;
        }

        .right .week {
            font-weight: normal;
            font-size: 28px;
            line-height: 28px;
            margin-top: 28px;
        }

        .right .time {
            font-size: 72px;
            line-height: 60px;
            font-weight: normal;
            margin-top: 40px;
            margin-bottom: 26px;
        }

        .right .barcode {
            height: 228px;
            margin-bottom: 53px;
        }

            .right .barcode img {
                margin: 0 auto;
            }

        .meetingContent::-webkit-scrollbar {
            display: none;
        }

        .model {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(150,150,150,.5);
            display: none
        }

            .model .content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 400px;
                min-height: 50px;
                overflow: hidden;
                border-radius: 10px;
                background: #fff;
                box-sizing: border-box;
                padding-top: 20px
            }

                .model .content input {
                    width: 100%;
                    display: block;
                    text-align: center;
                    outline: none;
                    height: 40px;
                }

                .model .content p {
                    color: #fff;
                    font-size: 12px;
                    padding-left: 20px;
                }

                    .model .content p.fail {
                        color: #f00;
                    }

                .model .content .footer {
                    display: flex;
                }

                    .model .content .footer span {
                        width: 50%;
                        text-align: center;
                        padding: 10px 0
                    }

        .btn-confirm {
            background: #007bff;
            color: #fff
        }

        h1 {
            margin: 0
        }

        .picker .picker-panel .picker-choose .cancel, .picker .picker-panel .picker-choose .confirm {
            top: 0 !important;
            width: 50%;
            font-size: 16px;

        }

        .picker .picker-panel .picker-choose .confirm {
            background: #007bff;
            color: #fff !important
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <img src="./logo.png" alt="" style="position: absolute;top:20px;left: 66px ">
        <div class="flexBox">

            <div class="left">
                <h1 class="meetingName" id="name">企业微信扫一扫</h1>
                <input type="hidden" id="roomId">
                <input type="hidden" id="cInfoId">
                <!--当前会议-->
                <div class="meetingInfo">
                    <p class="titleText">当前会议 <span class="markLine"></span></p>
                    <div class="meetingContent" style="padding-top: 10px;padding-bottom: 10px">
                        <ul>
                            <li>
                                <span class="property"><em>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题</em>:</span>
                                <span class="ability" id="ConferenceTheme"></span>
                            </li>
                            <li>
                                <span class="property"><em>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间</em>:</span>
                                <span class="ability" id="MeetTime"></span>
                            </li>
                            <li>
                                <span class="property">协&nbsp;调&nbsp;人:</span>
                                <span class="ability" id="Coordinator"></span>
                            </li>
                            <li>
                                <span class="property"><em>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</em>:</span>
                                <span class="ability" id="StateAndIsSignIn"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--今日会议-->
                <div class="meetingInfo">
                    <p class="titleText" style="margin-bottom: 0">今日会议 <span class="markLine"></span></p>
                    <div class="meetingContent todayMeeting">
                        <table>
                            <thead>
                                <tr>
                                    <td>主题</td>
                                    <td>时间</td>
                                    <td>协调人</td>
                                </tr>
                            </thead>
                            <tbody id="meetList">
                            
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
            <div class="right">
                <h1 class="date" id="date"></h1>
                <h1 class="week" id="week"></h1>
                <h1 class="time" id="time"></h1>
                <div class="barcode" id="qrcode">
                    <!--<img src="./barcode.png" alt="">-->
                </div>
                <p style="font-size: 14px">会议预约/签到</p>
                <p>企业微信扫一扫</p>
            </div>
        </div>
    </div>
    <div class="container2" id="container2">
        <div>
            <div class="log">
                <img src="meetingLogo2.png" alt="">
            </div>

            <div class="title" id="MeetingRoom">
                Meeting Room
            </div>

            <div class="content">
                <div class="leftIcon">
                    <img src="meetingImg.png" alt="">
                </div>
                <div class="rightText">
                    <ul>
                        <li>会 议 室</li>
                        <li id="peopleNum">3-12</li>
                        <li id="meetingCoordinator">协调人: XXX</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="model" class="model">
        <div class="content">
            <!-- <div class="header">
                请输入密码
            </div> -->
            <div class="main">
                <input type="password" id="importInp" placeholder="请输入四位密码">
                <p>密码输入有误</p>
            </div>
            <div class="footer">
                <span class="btn-back">取消</span><span class="btn-confirm">确认</span>
            </div>
        </div>
    </div>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="axios.min.js"></script>
    <script src="qrcode.min.js"></script>
    <script src="scripts/picker.min.js"></script>
    <script>
        $(function () {
            var webapi = "http://meeting.chinadydc.com/Meet_API/api/";
            var after = true, befor = true;
        
            var qrcode = new QRCode($("#qrcode")[0], {
                width: 228,
                height: 228
            });
            GetCode();
            gettime();
            //$('#testWidth').text(document.documentElement.clientWidth)
            //$('#testHeight').text(document.documentElement.clientHeight)
            setInterval(gettime, 6000);
            function gettime() {
          
                // window.Android.showToastMakeText('123')
                getMeetList();
                var now = new Date();
                var YY = now.getFullYear(),
                    MM = now.getMonth() + 1,
                    DD = now.getDate(),
                    day = now.getDay(),
                    hh = now.getHours(),
                    min = now.getMinutes();
                if (hh < 10) {
                    hh = '0' + hh;
                }
                if (min < 10) {
                    min = '0' + min
                }
                switch (day) {
                    case 1:
                        day = '一';
                        break;
                    case 2:
                        day = '二';
                        break;
                    case 3:
                        day = '三';
                        break;
                    case 4:
                        day = '四';
                        break;
                    case 5:
                        day = '五';
                        break;
                    case 6:
                        day = '六';
                        break;
                    case 0:
                        day = '天';
                        break;
                }
                $('#date').text(YY + '-' + MM + '-' + DD)
                $('#week').text('星期' + day)
                $('#time').text(hh + ':' + min)
                //return;
                var time = $('#MeetTime').text();

                if (time) {
                    var start = time.split('-')[0] + ':00',
                        end = time.split('-')[1] + ':00';
                    if (befor) {
                        if (new Date(YY + '/' + MM + '/' + DD + ' ' + start).getTime() - new Date(YY + '/' + MM + '/' + DD + ' ' + hh + ':' + min + ':00').getTime() < 600000 && new Date(YY + '/' + MM + '/' + DD + ' ' + start).getTime() - new Date(YY + '/' + MM + '/' + DD + ' ' + hh + ':' + min + ':00').getTime() > 0) {
                            befor = false
                            var cInfo1 = {
                                secret: 123,
                                obj: {
                                    CInfoId: $("#cInfoId").val()
                                }
                            }
                            axios.post(webapi + 'Pad/SendWxMessage', cInfo1).then(function (res) {

                            });
                        }
                    }
                    if (after) {
                        if (new Date(YY + '/' + MM + '/' + DD + ' ' + hh + ':' + min + ':00').getTime() - new Date(YY + '/' + MM + '/' + DD + ' ' + end).getTime() > 0) {
                            after = false
                            var cInfo2 = {
                                secret: 123,
                                obj: {
                                    CInfoId: $("#cInfoId").val()
                                }
                            }
                            axios.post(webapi + 'Pad/MeetingUpdate', cInfo2).then(function (res) {
                                after = true;
                                befor = true;

                            })
                        }
                    }

                } else {
                    after = true;
                    befor = true;
                }
            }
            // return
            function getMeetList() {
               
                const data = {
                    secret: 123,
                    obj: {
                        CRoomID: $("#roomId").val()
                    }
                };
                axios.post(webapi + 'MeetRoom/GetMeetingForPad', data)
                    .then(function (res) {
                        const ob = res.data.obj.data;
                        if (ob.State === 1) {
                            localStorage.setItem('CRoomID', $("#roomId").val())
                            $("#name").html(ob.ConferenceName);
                            $("#ConferenceTheme").html(ob.ConferenceTheme);
                            $("#Coordinator").html(ob.Coordinator);
                            //$("#roomId").val(ob.CRoomID);
                            $("#StateAndIsSignIn").html(ob.StateAndIsSignIn);

                            $("#MeetTime").html(ob.MeetTime);
                            $("#cInfoId").val(ob.CInfoID);
                            $('#container').show()
                            $('#container2').hide()
                            GetCode();
                        } else {
                            $('#MeetingRoom').text(ob.ConferenceName)
                            $('#meetingCoordinator').text(ob.Coordinator)
                            $('#peopleNum').text(ob.HoldNumber)

                            $('#container2').show()
                            $('#container').hide()
                        }

                        var meetStr = "";
                        if (window.Android) {


                            switch (ob.RoomState) {
                                case 2:
                                    window.Android.lightingColorIntSet(2)//进行中 红色
                                    break;
                                case 0:
                                    window.Android.lightingColorIntSet(1)
                                    break;
                                case 1:
                                    window.Android.lightingColorIntSet(0)
                                default:
                                    break;
                            }
                        }
                        //  window.Android.lightingColorIntSet2(1)
                        if (ob.meetingInfoList != null) {
                            ob.meetingInfoList.forEach(function (e) {
                                meetStr += ' <tr><td id="testWidth">' + e.ConferenceTheme + '</td><td id="testHeight">' + e.Start + ' - ' + e.End + '</td><td id="testBtn">' + e.Coordinator + '</td></tr>';
                            });
                            // window.Android.lightingColorIntSet(2)

                            $("#meetList").html(meetStr);
                        }
                    })
            }




            function GetCode() {
                var now = new Date().getTime();
                qrcode.makeCode("http://meeting.chinadydc.com/qc/Index.aspx?CRoomId=" + $("#roomId").val() + "&time=" + now + "&CInfoId=" + $("#cInfoId").val());
            }


            var city = '', pwd = '1234'


            var nameEl = document.getElementById('name');

            function romeList() {
                var first = []; /* 省，直辖市 */
                var second = []; /* 市 */
                var third = []; /* 镇 */

                var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */

                var checked = [0, 0, 0]; /* 已选选项 */
                function creatList(obj, list) {

                    obj.forEach(function (item, index, arr) {
                        var temp = new Object();
                        temp.text = item.name;
                        temp.id = item.ID;
                        temp.value = index;
                        // console.log(temp)
                        list.push(temp);
                    })
                }
                $.ajaxSettings.async = false;
                $.post(webapi + 'Setting/GetRegionalForPad', function (res) {
                    city = res.obj.data
                    creatList(city, first);
                })
                if (city[selectedIndex[0]].hasOwnProperty('sub')) {
                    creatList(city[selectedIndex[0]].sub, second);
                } else {
                    second = [{ text: '', value: 0 }];
                }

                if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
                    creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
                } else {
                    third = [{ text: '', value: 0 }];
                }

                picker = new Picker({
                    data: [first, second, third],
                    selectedIndex: selectedIndex,
                    //title: '地址选择'
                });

                picker.on('picker.select', function (selectedVal, selectedIndex) {
                    var text1 = first[selectedIndex[0]].text;
                    var text2 = second[selectedIndex[1]].text;
                    var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
                    if (text3) {
                        $("#name").html(text3)
                        $("#roomId").val(third[selectedIndex[2]].id)
                    } else {
                        $("#name").html(text2)
                        $("#roomId").val(third[selectedIndex[1]].id)
                    }
                    setting.updatesettingstring("Id", $("#roomId").val());
                    getMeetList();
                    //nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
                });

                picker.on('picker.change', function (index, selectedIndex) {
                    if (index === 0) {
                        firstChange();
                    } else if (index === 1) {
                        secondChange();
                    }

                    function firstChange() {
                        second = [];
                        third = [];
                        checked[0] = selectedIndex;
                        var firstCity = city[selectedIndex];
                        if (firstCity.hasOwnProperty('sub')) {
                            creatList(firstCity.sub, second);

                            var secondCity = city[selectedIndex].sub[0]
                            if (secondCity.hasOwnProperty('sub')) {
                                creatList(secondCity.sub, third);
                            } else {
                                third = [{ text: '', value: 0 }];
                                checked[2] = 0;
                            }
                        } else {
                            second = [{ text: '', value: 0 }];
                            third = [{ text: '', value: 0 }];
                            checked[1] = 0;
                            checked[2] = 0;
                        }

                        picker.refillColumn(1, second);
                        picker.refillColumn(2, third);
                        picker.scrollColumn(1, 0)
                        picker.scrollColumn(2, 0)
                    }

                    function secondChange() {
                        third = [];
                        checked[1] = selectedIndex;
                        var first_index = checked[0];
                        if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
                            var secondCity = city[first_index].sub[selectedIndex];
                            creatList(secondCity.sub, third);
                            picker.refillColumn(2, third);
                            picker.scrollColumn(2, 0)
                        } else {
                            third = [{ text: '', value: 0 }];
                            checked[2] = 0;
                            picker.refillColumn(2, third);
                            picker.scrollColumn(2, 0)
                        }
                    }

                });

                picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
                    console.log(selectedVal);
                    console.log(selectedIndex);
                });

                picker.show();

            }
            //$.data()
            if (localStorage.getItem('CRoomID')) {
                $("#roomId").val(localStorage.getItem('CRoomID'))
                getMeetList()
            } else {
                if (parseInt(setting.getsettingstring("Id")) > 0) {
                    $("#roomId").val(setting.getsettingstring("Id"));
                    localStorage.setItem('CRoomID', $("#roomId").val())
                } else {
                    romeList()
                }
                 
             
            }


            nameEl.addEventListener('click', function () {
                $('#model').show();
            });
            $('.btn-confirm').click(function function_name(argument) {
                var inp = $('#importInp')
                if (inp.val() == pwd) {
                    romeList()
                    $('#model').hide();
                    inp.val('')
                    inp.removeClass('fail')
                } else {
                    inp.addClass('fail')
                }
            });
            $('.btn-back').click(function function_name(argument) {
                $('#model').hide();
                $('#importInp').val('')
            })
        })


    </script>
</body>
</html>